<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>响应式学习</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<style>
			.news {
				width: 1200px;
				height: 800px;
				background-color: blanchedalmond;
				margin: 0 auto;

				div {
					background: aliceblue;
				}

				.color2 {
					background: cadetblue;
				}
			}

			/* 设备：xs 手机 */
			@media(max-width: 575px) {
				.news {
					width: 100%;
				}
			}

			/* 设备：sm 平板*/
			@media(min-width: 576px) and (max-width: 767px) {
				.news {
					width: 100%;
				}
			}

			/* 设备：md 电脑*/
			@media(min-width: 768px) and(max-width: 991px) {
				.news {
					width: 768px;
				}
			}

			/* 设备：lg 超大屏幕 */
			@media(min-width: 992px) {
				.news {
					width: 992px;
				}
			}
		</style>
	</head>
	<body>
		<h1>hello 响应式</h1>


		<!-- 模拟腾讯新闻 -->
		<div class="layui-row news">
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8 color1">左</div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color2">右</div>
		</div>
	</body>
</html>

<script src="layui/layui.js"></script>